import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface StrokeAnimationProps {
    chartId?: string;
    width?: string;
    height?: string;
    text?: string;
    fontSize?: number;
    strokeColor?: string;
    fillColor?: string;
}

@customElement('lit-stroke-animation')
export class LitStrokeAnimation extends LitElement {
    @property({type: String}) chartId: string = 'lit-stroke-animation-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: String}) text: string = '';
    @property({type: Number}) fontSize: number = 80;
    @property({type: String}) strokeColor: string = '#000';
    @property({type: String}) fillColor: string = 'black';

    option: echarts.EChartsOption = {
        graphic: {
            elements: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: this.text,
                        fontSize: this.fontSize,
                        fontWeight: 'bold',
                        lineDash: [0, 200],
                        lineDashOffset: 0,
                        fill: 'transparent',
                        stroke: this.strokeColor,
                        lineWidth: 1
                    },
                    keyframeAnimation: {
                        duration: 3000,
                        loop: true,
                        keyframes: [
                            {
                                percent: 0.7,
                                style: {
                                    fill: 'transparent',
                                    lineDashOffset: 200,
                                    lineDash: [200, 0]
                                }
                            },
                            {
                                // Stop for a while.
                                percent: 0.8,
                                style: {
                                    fill: 'transparent'
                                }
                            },
                            {
                                percent: 1,
                                style: {
                                    fill: this.fillColor,
                                }
                            }
                        ]
                    }
                }
            ]
        }
    };

    static styles = style;

    updated(): void {
        (this.option.graphic as any).elements[0].style.text = this.text;
        (this.option.graphic as any).elements[0].style.fontSize = this.fontSize;
        (this.option.graphic as any).elements[0].style.stroke = this.strokeColor;
        (this.option.graphic as any).elements[0].style.fill = this.fillColor;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-stroke-animation': LitStrokeAnimation;
    }
}